<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            list-style: none;
        }
        .frame {
            background-color: pink;
            height: 500px;
            width: 800px;
            
            border-radius: 15px;
            margin: 0 auto;
            text-align: center;
        }
        h1 {
            top: 0;
            left: 0;
            text-align: center;
        }
        .list1 {
            text-align: center;
        }
        .list1>input {
            height: 35px;
            width: 350px;
            margin:  0 0 10px 0;
        }
        .list1>button {
            background-color: skyblue;
            height: 40px;
            color: white;
            width: 100px;
            border: 1px solid #d1d5db;
            border-radius: 0.25rem;
            cursor: pointer;
        }
        .list2 {
            text-align: center;
        }
        .list2>input {
            height: 35px;
            width: 325px;
        }
        .list2>button {
            background-color: skyblue;
            height: 40px;
            color: white;
            width: 125px;
            border: 1px solid #d1d5db;
            border-radius: 0.25rem;
            cursor: pointer;
        }
        .list {
            margin: 20px 0 0 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .list3 {
            border: 1px solid white;
            width: 200px;
            height: 200px;
            border-radius: 0.25rem;
            
        }
        .list4 {
            border: 1px solid white;
            width: 200px;
            height: 200px;
            border-radius: 0.25rem;
            margin: 0 0 0 30px;
        }
        #start {
            background-color: skyblue;
            height: 40px;
            color: white;
            width: 125px;
            border: 1px solid #d1d5db;
            border-radius: 0.25rem;
            cursor: pointer;
        }
        #end {
            background-color: rgb(169，169，169);
            height: 40px;
            color: white;
            width: 125px;
            border: 1px solid #d1d5db;
            border-radius: 0.25rem;
            cursor: pointer;
        }

    </style>
</head>
<body>
    <div class="frame">
        <h1>滚动抽奖游戏</h1>
        <div class="list1">
            <input type="text" id="input1" placeholder="输入奖品">
            <button id="app1">+设置奖品</button>
        </div>
        <div class="list2">
            <input type="text" id="input2" placeholder="输入参与人员">
            <button id="app2">+设置参与人员</button>
        </div>
        <div class="list">
            <div class="list3">
                <span>奖品</span>
                <ul id="app3"></ul>
            </div>
            <div class="list4">
                <span>参与人员列表</span>
                <ul id="app4"></ul>
            </div>
        </div>
        <div>
            <p id="text1">滚动中:无</p>
            <button id="start">开始抽奖</button>
            <button id="end">停止抽奖</button>
        </div>
    </div>
    <script>
        const input1= document.getElementById('input1');
        const input2= document.getElementById('input2');
        const app1= document.getElementById('app1');
        const app2= document.getElementById('app2');
        const app3= document.getElementById('app3');
        const app4= document.getElementById('app4');
        const start=document.getElementById('start');
        const end= document.getElementById('end');
        const text1= document.getElementById('text1');
        let price1=[];
        let price2=[];
        app1.addEventListener('click',function(){
            const sum1=input1.value;
            if(sum1) {
                price1.push(sum1);
                const li1=document.createElement('li')
                li1.textContent=sum1;
                app3.appendChild(li1);
                input1.value='';
            }
        })
        app2.addEventListener('click',function(){
            const sum2=input2.value;
            if(sum2) {
                price2.push(sum2);
                const li2=document.createElement('li')
                li2.textContent=sum2;
                app4.appendChild(li2);
                input2.value='';
            }
        })
        start.addEventListener('click',function(){
            if(price2.length===0&&price1.length===0)
            {
                alert('请先添加参与人员和奖品!!!')
                return;
            }
            else if(price1.length===0)
            {
                alert('请先添加奖品!!!')
                return;
            }
            else if(price2.length===0)
            {
                alert('请先添加参与人员!!!')
                return;
            }
            if(price1.length>0&&price2.length>0){
                n=setInterval(function(){
                    const random=Math.floor(Math.random()*price2.length);
                    text1.innerHTML=`<p>${price2[random]}</p>`
                },100)
            }
        })
        end.addEventListener('click',function(){
            if(price1.length>0&&price2.length>0){
            clearInterval(n);
            const ap1=app3.children;
            const ap2=app4.children;
            const random1=Math.floor(Math.random()*price1.length);
            const random2=Math.floor(Math.random()*price2.length);
            const price3=price1.splice(random1,1)[0];
            const price4=price2.splice(random2,1)[0];
            text1.innerHTML=`<p>恭喜${price4}获得了${price3}</p>`
            app3.removeChild(ap1[random1]);
            app4.removeChild(ap2[random2]);
            }
        })
    </script>
</body>
</html>